<template>
    <div>
        <el-upload
            accept="image/*"
            class="singleClass1"
            :action="action"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <div v-if="pic">
                <el-image :src="pic" fit="contain"></el-image>
                <div class="el-upload-list__item-actions">
                    <div class="upload-icon" @click="iconBoxClick($event)">
                        <span class="el-uploads-span" style="margin-right: 10px;" @click="handlePicturePreview($event,pic)">
                            <i class="el-icon-zoom-in"></i>
                        </span>
                        <span class="el-upload-span" @click="handleRemove($event,'')">
                            <i class="el-icon-delete"></i>
                        </span>
                    </div>
                </div>
            </div>
            <div v-else>
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <div class="upFont">上传图片</div>
            </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import {getToken} from 'src/utils/auth'
    export default {
        name: "WisdomUploadSingle",
        props:{
            edUploadForm:{
                type:Object,
                required: false,
                default: function () {
                    return {};
                }
            },
            WisdomUploadSingleClass:""
        },
        data(){
            return{
                action:"",
                headers:{
                    RdAuthorization: getToken()
                },
                pic:"",
                isClass:true,
                dialogImageUrl: '',
                dialogVisible: false
            }
        },
        mounted(){
            // this.action = this.$baseApi + "/file/upload";
            this.action = this.$baseApi + "/infra/file/upload";
        },
        methods:{
            setPic(url){
                this.pic = url;
            },
            handleAvatarSuccess(file){
                this.pic = file.data;
                this.$emit("pic-url",file.data)
            },
            beforeAvatarUpload(file){
                const fileType = file.name.split('.');
                const fileDate = fileType.slice(-1);
                // if (['jpeg', 'jpg', 'png'].indexOf(fileDate[0]) < 0) {
                // if (['jpeg', 'jpg', 'png', 'gif'].indexOf(file.type.split('/')[1]) < 0) {
                //     this.$message.error({message: '仅支持格式：jpeg、jpg、png、gif!', center: true});
                //     return false
                // }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error({ message: '上传文件大小不能超过 2MB!', center: true });
                }
                return isLt2M;
            },
            handleRemove(e, url) {
                this.stopBubble(e)
                this.pic = url;
                this.$emit("pic-del")
            },
            handlePicturePreview(e, url) {
                this.stopBubble(e)
                this.dialogImageUrl = url;
                this.dialogVisible = true;
            },
            stopBubble(event){
                if(event.stopPropagation){
                    event.stopPropagation();
                }else{
                    event.cancelBubble = true;
                }
            },
            iconBoxClick(e){
                this.stopBubble(e)
            }
        }
    }
</script>

<style lang="scss">
    .singleClass1{
        .el-upload{
            width: 350px;
            height: 250px;
            background: #f7f7f7;
            border: 1px dashed #dddddd;
            border-radius: 6px;
            display: flex;
            -webkit-display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
            .el-icon-plus{
                font-size: 24px;
                color: rgba(0, 0, 0, 0.45);
            }

            .el-upload-list__item-actions {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                color: #fff;
                opacity: 0;
                font-size: 20px;
                background-color: rgba(0,0,0,.5);
                transition: opacity .3s;

                .upload-icon {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .el-icon-zoom-in {
                        width: 25px;
                        height: 25px;
                        color: #FFFFFF;
                        font-weight: bold;
                    }
                    .el-icon-delete {
                        width: 25px;
                        height: 25px;
                        color: #FFFFFF;
                        font-weight: bold;
                    }
                }
            }
            .el-upload-list__item-actions:hover {
                opacity: 1;
            }
        }
        .el-upload:hover {
            // border-color: #409EFF;
        }
    }
    .upFont{
        font-size: 14px;
        color: #989898;
        line-height: 22px
    }
</style>